<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket 测试客户端</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <link rel="stylesheet" href="elementui.css">
    <link rel="stylesheet" href="app.css">
    <script src="vue.js"></script>
    <script src="elementui.js"></script>
    <script src="axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="200px">
            <h2 style="margin-top:30px;">分系统</h2>
            <el-row>
                <el-tag @click="queryDevParam('1')">设备一【点击推参数】</el-tag>
                <el-tag type="success" @click="queryDevParam('2')">设备二【点击推日志】</el-tag>
                <el-tag type="info" @click="queryDevParam('3')">设备三</el-tag>
                <el-tag type="warning" @click="queryDevParam('4')">设备四</el-tag>
                <el-tag type="danger" @click="queryDevParam('5')">设备五</el-tag>
            </el-row>
            <h2 style="margin-top:30px;">socket调试</h2>
            <textarea rows=20 style="color:red" v-text="debug"></textarea>
        </el-aside>
        <el-container>
            <el-main>
                <el-row>
                    <h2>监控区域</h2>
                    <el-tabs :tab-position="tabPosition">
                        <el-tab-pane v-for="(dp,i) in dev.param" :label="dp.tabName">
                            <el-form :inline="true">
                                <el-form-item v-for="(ip,i) in dp.params" :label="ip.name">
                                    <el-input style="color:green" v-model="ip.value" disabled="disabled"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
                <el-row>
                    <h2>控制区域</h2>

                    <el-row>
                        <el-tabs :tab-position="tabPosition">
                            <el-tab-pane v-for="(dp,i) in dev.ctrl" :label="dp.tabName">
                                <el-form :inline="true">
                                    <el-form-item v-for="(ip,i) in dp.params" :label="ip.name">
                                        <!--                                    <span v-text="ip.paramValue"></span>-->
                                        <el-input style="color:red" v-model="ip.value" disabled="disabled"></el-input>
                                    </el-form-item>
                                </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </el-row>
                    <el-row>
                        <el-button type="primary" round>控制</el-button>
                        <el-button type="success" round>执行</el-button>
                        <el-button round>取消</el-button>
                    </el-row>

                </el-row>
                <el-row>
                    <h2>日志区域</h2>
                    <el-table
                            :data="logData"
                            style="color:red;width: 100%">
                        <el-table-column
                                prop="dateTime"
                                label="时间"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="commander"
                                label="命令发布"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="warningLevel"
                                label="警告级别">
                        </el-table-column>
                        <el-table-column
                                prop="content"
                                label="内容"

                        >
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-main>
        </el-container>
    </el-container>
</div>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                message: "欢迎您",
                debug: "调试信息",
                tabPosition: 'left',
                dev: {
                    param: [
                        {
                            tabName: "查询接口",
                            params: [
                                {
                                    name: "查询参数一",
                                    value: 12
                                },
                                {
                                    name: "查询参数三",
                                    value: 0.54
                                },
                                {
                                    name: "查询参数三",
                                    value: 53.6
                                }
                            ]
                        },
                        {
                            tabName: "查询网络接口",
                            params: [
                                {
                                    name: "本地IP地址",
                                    value: "192.168.0.111"
                                },
                                {
                                    name: "本地端口",
                                    value: 6624
                                }
                            ]
                        }
                    ],
                    ctrl: [
                        {
                            tabName: "acu控制单元",
                            params: [
                                {
                                    name: "单元参数一",
                                    value: 1132
                                },
                                {
                                    name: "单元参数二",
                                    value: 5545
                                },
                                {
                                    name: "单元参数三",
                                    value: 845
                                }
                            ]
                        }
                    ],
                },
                logData: [
                ]
            }
        },
        created() {
            this.initWebSocket();
        },
        destroyed() {
            this.websock.close() //离开路由之后断开websocket连接
        },
        mounted() {
            this.dev = {}
        },

        methods: {
            queryDevParam: function (devNo) {
                this.$message({
                    message: '开始加载设备：'+devNo,
                    type: 'success'
                });
                this.logData = [];
                this.dev = null;
                let data ={
                    "devNo":devNo+"",
                    "dataType":"PARAM"
                };

                this.websocketsend(JSON.stringify(data));
            },
            initWebSocket() { //初始化weosocket
                const wsuri = "ws://127.0.0.1:8888/monitor";
                this.websock = new WebSocket(wsuri);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onclose = this.websocketclose;
                console.log("准备建立链接：{}", this.websock);
            },
            websocketonopen() { //连接建立之后执行send方法发送数据
                console.log("已建立连接")
                this.debug = "已建立连接";
                // let actions = {"test": "12345"};
                // this.websocketsend(JSON.stringify(actions));
            },
            websocketonerror() {//连接建立失败重连
                console.log("失败重连")
                this.debug = "失败重连";
                this.initWebSocket();
            },
            websocketonmessage(e) { //数据接收
                let result = JSON.parse(e.data);
                this.debug = result;

                if(result.dataType == "PARAM"){
                    var dev = eval('(' + result.data + ')');
                    this.dev = dev;
                }else if(result.dataType == "LOG"){
                    this.dev = {};
                    if(this.logData.length ==5){
                        this.logData = this.logData.slice(1)
                    }
                    this.logData.push({
                        commander:result.data.commander,
                        content:result.data.content,
                        warningLevel:result.data.warningLevel,
                        dateTime:result.data.dateTime,
                    });

                    console.log(result.data.commander)
                }

            },
            websocketsend(Data) {//数据发送
                this.websock.send(Data);
            },
            websocketclose(e) {  //关闭
                console.log('断开连接', e);
            },
        }
    })
</script>
</body>
</html>